<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        a {
            text-decoration: none;
            color: #333;
        }
        
        li {
            list-style: none;
        }
        
        .flx {
            display: flex;
        }
        
        .flx2 {
            margin-left: 30px;
        }
        
        .flx3 {
            display: inline-block;
            width: 56px;
            height: 38px;
            font-size: 25px;
        }
        
        .flx4 {
            display: none;
        }
        
        .flx4>li {
            width: 61px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            padding-bottom: 3px;
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="flx">
            <li class="flx2">
                <a href="#" class="flx3">微博</a>
                <!-- 这里放例子 -->
                <ul class="flx4">
                    <li><a href="#">私信</a></li>
                    <li><a href="#">评论</a></li>
                    <li><a href="#">@我</a></li>
                </ul>
            </li>
            <li class="flx2">
                <a href="#" class="flx3">邮箱</a>
                <ul>
                    <li><a href="#">收件箱</a></li>
                    <li><a href="#">发件箱</a></li>
                    <li><a href="#">消息</a></li>
                </ul>
            </li>
            <li class="flx2">
                <a href="#" class="flx3">博客</a>
                <ul>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">写新博客</a></li>
                    <li><a href="#">其他</a></li>
                </ul>
            </li>
        </ul>
        <script>
            // 1. 获取元素
            var lis = document.querySelector('.flx2');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmoueseover = function() {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].children[i].style.display = 'none';
                    }
                    this.children[1].style.display = 'block';
                }
            }
        </script>
    </div>
</body>

</html>